import React from 'react';
import { useEffect } from 'react';
import * as echarts from 'echarts';
import { system_realtimedata } from '../utils/api'




function Myechartsone(props) {
  // 基于准备好的dom，初始化echarts实例
  var list = []
  useEffect(() => {
    system_realtimedata().then((res) => {
      console.log(1111, res.data.list);
      list = res.data.list.xAxis
      var myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      let option = {
        title: {
          text: '在线服务趋势',
          left:'center'
        },
        legend: {
          data: [],
          
          top: 30,
          
        },
        tooltip: {
          top:70,
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: []
      }

      option.xAxis.data = res.data.list.xAxis
      option.series = res.data.list.series
      option.series.forEach((item, index) => {
        item.type = "line"
        option.legend.data.push(item.name)
      })
      console.log(option);
      myChart.setOption(option)
    })
  }, [])

  return (
    <div className='myechartsone' >
      <div id='main'>

      </div>
    </div>
  );
}


export default Myechartsone;
